<template>
    <span>用户名：</span>
    <input type="text" v-model="username"><br>
    <span>用户信息</span>
    <input type="text" v-model="user.name"><br>
    <span>用户年龄</span>
    <input type="text" v-model="user.age">
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
const username = ref('')
const user = reactive({
    name: '张三',
    age: 18
})

// watch(username, (newVal, oldVal) => {
//     console.log("新的值是：",newVal, '旧值是',oldVal)
//     if (newVal === 'admin') {
//         alert('用户名不能为 admin')
//         username.value = ''
//     }

// })
watch(user, (newVal, oldVal) => { 
    console.log("新的值是：",newVal, '旧值是',oldVal);
    

},
{
    deep: true, //深度侦听
    immediate:true //立即执行一次

}
)

</script>

<style scoped>

</style>